<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
</head>
<body>
<!--提取重用的页面内容-->
<div th:replace="common/common::html"></div>
<div th:replace="common/common::html"></div>
<!--标题-->
<title th:text="#{login.tile.tip}"></title>
<!--Javacript页面提交动用-->

<script th:inline="javascript">
    $(function () {
        $("#submit-id").click(function (event) {
            var flag = true;

            flag &= $("#user-name-id").verification();
            flag &= $("#password-id").verification();
            if(!flag){
                return;
            }

            $("#login-form-id").submit();

        });

        $("#login-register-id").click(function (event) {
            message("register success!");
        });

    });//ready
</script>
<!--弹性布局-->
<body style="display: flex;flex-direction: column">
</body>

<!--语言选择-->

<div style="display: flex;flex-direction: row" >
    <img th:if="${session.siteLanguage} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:if="${session.siteLanguage} ne 'en'" th:src="@{/assets/images/logo_zh.png}">
    <div style="position: absolute;right: 100px; top: 0;">
        <a class="btn-toolbar" href="#" th:href="@{/login/login(siteLanguage=zh)}" target="_self" th:text="#{login.chinese}">中文</a>
        <a class="btn-toolbar" href="#" th:href="@{/login/login(siteLanguage=en)}" target="_self" th:text="#{login.english}">英文</a>
    </div>
</div>

<!--登录布局-->

<div style="flex-grow: 1;display: flex;flex-direction: row">
    <div style="flex-grow: 1">
        <img th:src="@{/assets/images/pic.png}"></img>
    </div>

    <form style="width: 400px;" id="login-form-id" th:action="@{/login/verification}" method="post">
        <div class="form-group">
            <span for="user-name-id" th:text="#{login.username}">:</span>
            <input class="form-control" type="text" name="username" id="user-name-id" regex="^.{1,40}$" tip="input 1 to 40 char">
        </div>
        <div class="form-group">
            <span for="password-id" th:text="#{login.password}">:</span>
            <input class="form-control" type="password" name="password" id="password-id" regex="^.{1,40}$" tip="input 1 to 40 char">
        </div>
        <div class="form-group">
            <a class="form-control btn-success" id="submit-id" href="#" style="text-align: center" th:text="#{login.submit}">
            </a>
        </div>
        <div>
            <a id="login-register-id" href="#" th:text="#{login.register}"></a>
        </div>
    </form>
    <div style="width: 200px;"></div>
</div>
</body>
</html>
